<template>
	<div class="activeNotification">
		<h3>Notification 通知</h3>
		<div class="notification1">
			<el-row :gutter="20">
				<h4>基础用法</h4>
				<el-col :span="12">
					<h5>可自动关闭</h5>
					<el-button plain @click="open">可自动关闭</el-button>
				</el-col>
				<el-col :span="12">
					<h5>不会自动关闭</h5>
					<el-button plain @click="open2">不可自动关闭</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="notification2">
			<h4>带有倾向性</h4>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-button plain @click="open3">成功</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain @click="open4">警告</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain @click="open5">消息</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain @click="open6">错误</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="notification3">
			<h4>自定义弹出位置(top-right、top-left、bottom-right、bottom-left)</h4>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-button plain top-right  @click="open7">右上角</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain bottom-right @click="open8">右下角</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain top-left @click="open9">左上角</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain bottom-left @click="open10">左下角</el-button>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
			open() {
				const h = this.$createElement;

				this.$notify({
					title: '我会自动关闭哦',
					message: h('i', {
						style: 'color: teal'
					}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
				});
			},
			open2() {
				this.$notify({
					title: '提示',
					message: '这是一条不会自动关闭的消息',
					duration: 0
				});
			},
			open3(){
				this.$notify({
					title:'成功提示',
					message:'这是一条成功的提示消息',
					type:'success'
				})
			},
			open4(){
				this.$notify({
					title:'警告提示',
					message:'这是一条警告的提示消息',
					type:'warning'
				})
			},
			open5(){
				this.$notify({
					title:'消息提示',
					message:'这是一条消息提示框',
					type:'info'
				})
			},
			open6(){
				this.$notify({
					title:'错误提示',
					message:'这是一条错误提示框',
					type:'error'
				})
			},
			open7(){
				this.$notify({
					title:'自定义位置',
					message:'右上角弹出消息提示'
				})
			},
			open8(){
				this.$notify({
					title:'自定义位置',
					message:'右下角弹出消息提示'
				})
			},
			open9(){
				this.$notify({
					title:'自定义位置',
					message:'左上角弹出消息提示'
				})
			},
			open10(){
				this.$notify({
					title:'自定义位置',
					message:'左小角弹出消息提示'
				})
			}
		}
	}
</script>

<style>

</style>